<template>

    <el-form ref="form"   :model="form" label-width="150px" style="padding-top: 30px" >
        <el-form-item label="举报名称" >

            <el-input v-model="form.name" class="input-reader-name"></el-input>
        </el-form-item>

        <el-form-item label="时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 50%;"></el-date-picker>
            </el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 50%;"></el-time-picker>
            </el-col>
        </el-form-item>

        <el-form-item label="照片">
            <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>

        <el-form-item label="举报内容介绍">
            <el-input type="textarea" v-model="form.desc" style="width: 60%;"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>


    </el-form>
</template>

<script>
    export default {
        name: "Complaint",
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            resetForm(form) {
                console.log("yes")

                this.$refs[form].resetFields();
                console.log(this.form)
            }
        }
    }
</script>

<style scoped>
    ::v-deep .input-reader-name{
        width: 40%;
    }
</style>
